<template>
  <div class="i-table-no-border">
    <div>
      <table-btns
        :tableTopOperateData="listData.tableTopOperate"
        :tableTopBatchOperate="listData.tableTopBatchOperate"
        :selectedData="selectedData"
        :requestApi="listData.requestApi"
        @pSub="pSub"
        :basePath="basePath"
        @exportData="exportData"
        @actionsChange="getData"
      >
      </table-btns>
    </div>
    <!-- 表格内容 start  -->
    <Table
      ref="table"
      max-height="450"
      :columns="columns"
      :data="tableDataList"
      :loading="loading"
      class="ivu-mt"
      stripe
      @on-filter-change="handleFilterChange"
      @on-select="handleSelect"
      @on-select-cancel="handleSelectCancel"
      @on-select-all="handleSelectAll"
      @on-select-all-cancel="handleSelectAllCancel"
    >
      <template slot-scope="{ row }" slot="salePriceType">
        <span>{{ formatSalePriceType(row.old.salePriceType) }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="salePriceTypeUpdate">
        <Select
          v-model="row.salePriceTypeUpdate"
          disabled
          :transfer="true"
          @on-select="changInput(row, index)"
          style="width: 120px"
        >
          <Option
            v-for="item in salePriceTypes"
            :value="item.value"
            :key="item.value"
          >
            {{ item.name }}
          </Option>
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="productName">
        <span>{{ row.old.productName }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="spec">
        <span>{{ row.old.spec }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="productManagerArea">
        <span>{{ row.old.productManagerArea }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="unit">
        <span>{{ row.old.unit }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="compareArea">
        <span>{{ row.old.compareArea }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="compareAreaUpdate">
        <Input
          v-model="row.compareAreaUpdate"
          @on-change="changInput(row, index)"
          placeholder="请输入..."
        />
      </template>
      <template slot-scope="{ row, index }" slot="compareType">
        <span v-if="row.old.compareType == '1'">一品多供</span>
        <span v-if="row.old.compareType == '2'">竞争对手</span>
        <span v-if="row.old.compareType == '3'">同品类供应商</span>
        <span v-if="row.old.compareType == '4'">同品牌供应商</span>
      </template>
      <template slot-scope="{ row, index }" slot="compareTypeUpdate">
        <Select
          v-model="row.compareTypeUpdate"
          style="width: 120px"
          transfer
          @on-change="compareTypeSelect($event, row, index)"
        >
          <Option
            v-for="item in compareTypeUpdateList"
            :value="item.optionValue"
            :key="item.optionHtml"
          >
            {{ item.optionHtml }}
          </Option>
        </Select>
      </template>
      <template slot-scope="{ row }" slot="compareTarget">
        <span>{{ row.old.compareTarget }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="compareTargetUpdate">
        <div v-if="row.compareTypeUpdate === '2'">
          <Input
            v-model="row.compareTargetUpdate"
            @on-change="changInput(row, index)"
            placeholder="请输入..."
          />
        </div>
        <div v-else>
          <Input
            v-model="row.compareTargetUpdate"
            placeholder="请选择"
            @on-search="compareFun(row, index)"
            search
            enter-button
            readonly
            style="width: 120px"
          />
        </div>
      </template>
      <template slot-scope="{ row, index }" slot="compareTargetName">
        <span>{{ row.old.compareTargetName }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="compareTargetNameUpdate">
        <div v-if="row.compareTypeUpdate === '2'">
          <Input
            v-model="row.compareTargetNameUpdate"
            @on-change="changInput(row, index)"
            placeholder="请输入..."
          />
        </div>
        <div v-else>
          <Input
            v-model="row.compareTargetNameUpdate"
            placeholder="请选择"
            readonly
            disabled
            style="width: 120px"
          />
        </div>
      </template>
      <template slot-scope="{ row, index }" slot="compareTel">
        <span>{{ row.old.compareTel }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="compareTelUpdate">
        <div v-if="row.compareTypeUpdate === '2'">
          <Input
            v-model="row.compareTelUpdate"
            @on-change="changInput(row, index)"
            placeholder="请输入..."
          />
        </div>
        <div v-else>
          <Input
            v-model="row.compareTelUpdate"
            readonly
            disabled
            style="width: 120px"
          />
        </div>
      </template>
      <template slot-scope="{ row, index }" slot="compareMan">
        <span>{{ row.old.compareMan }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="compareManUpdate">
        <div v-if="row.compareTypeUpdate === '2'">
          <Input
            v-model="row.compareManUpdate"
            @on-change="changInput(row, index)"
            placeholder="请输入..."
          />
        </div>
        <div v-else>
          <Input
            v-model="row.compareManUpdate"
            readonly
            disabled
            style="width: 120px"
          />
        </div>
      </template>
      <template slot-scope="{ row, index }" slot="compareAddress">
        <span>{{ row.old.compareAddress }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="compareAddressUpdate">
        <div v-if="row.compareTypeUpdate === '2'">
          <Input
            v-model="row.compareAddressUpdate"
            @on-change="changInput(row, index)"
            placeholder="请输入..."
          />
        </div>
        <div v-else>
          <Input
            v-model="row.compareAddressUpdate"
            readonly
            disabled
            style="width: 120px"
          />
        </div>
      </template>
      <template slot-scope="{ row, index }" slot="brandDiff">
        <span>{{ row.old.brandDiff }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="brandDiffUpdate">
        <Input
          v-model="row.brandDiffUpdate"
          @on-change="changInput(row, index)"
          placeholder="请输入..."
        />
      </template>
      <template slot-scope="{ row, index }" slot="markupType">
        <span>{{ row.old.markupTypeName }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="markupTypeUpdate">
        <Select
          v-model="row.markupTypeUpdate"
          @on-change="changInput(row, index)"
          style="width: 100%"
          transfer
        >
          <Option
            v-for="item in markupTypeUpdateList"
            :value="item.optionValue"
            :key="item.optionHtml"
            >{{ item.optionHtml }}</Option
          >
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="markupValue">
        <span>{{ row.old.markupValue }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="markupValueUpdate">
        <Input
          v-model="row.markupValueUpdate"
          @on-change="changInput(row, index)"
          placeholder="请输入..."
        />
      </template>
      <template slot-scope="{ row, index }" slot="comparePirceType">
        <span>{{ row.old.comparePirceTypeName }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="comparePirceTypeUpdate">
        <Select transfer v-model="row.comparePirceTypeUpdate" style="width: 120px">
          <Option
            v-for="item in comparePirceTypeUpdateList"
            :value="item.optionValue"
            :key="item.optionHtml"
          >
            {{ item.optionHtml }}
          </Option>
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="weighMarkupValue">
        <span>{{ row.old.weighMarkupValue }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="weighMarkupValueUpdate">
        <Input
          v-model="row.weighMarkupValueUpdate"
          @on-change="changInput(row, index)"
          placeholder="请输入..."
        />
      </template>
      <template slot-scope="{ row, index }" slot="lastSaleCount">
        <span>{{ row.old.lastSaleCount }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="lastSaleCountUpdate">
        <Input
          v-model="row.lastSaleCountUpdate"
          @on-change="changInput(row, index)"
          placeholder="请输入..."
        />
      </template>
      <template slot-scope="{ row, index }" slot="nowSaleCount">
        <span>{{ row.old.nowSaleCount }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="nowSaleCountUpdate">
        <Input
          v-model="row.nowSaleCountUpdate"
          @on-change="changInput(row, index)"
          placeholder="请输入..."
        />
      </template>
      <template slot-scope="{ row, index }" slot="saleRate">
        <span>{{ row.old.saleRate }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="saleRateUpdate">
        <Input
          v-model="row.saleRateUpdate"
          @on-change="changInput(row, index)"
          placeholder="请输入..."
        />
      </template>
      <template slot-scope="{ row, index }" slot="compareRule">
        <span>{{ row.old.compareRule }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="compareRuleUpdate">
        <Input
          v-model="row.compareRuleUpdate"
          @on-change="changInput(row, index)"
          placeholder="请输入..."
        />
      </template>
      <template slot-scope="{ row, index }" slot="securityRateMax">
        <span>{{ row.old.securityRateMax }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="securityRateMaxUpdate">
        <Input
          v-model="row.securityRateMaxUpdate"
          @on-change="changInput(row, index)"
          placeholder="请输入..."
        />
      </template>
      <template slot-scope="{ row, index }" slot="securityRateMin">
        <span>{{ row.old.securityRateMin }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="securityRateMinUpdate">
        <Input
          v-model="row.securityRateMinUpdate"
          @on-change="changInput(row, index)"
          placeholder="请输入..."
        />
      </template>
      <template slot-scope="{ row, index }" slot="securityPriceMax">
        <span>{{ row.old.securityPriceMax }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="securityPriceMaxUpdate">
        <Input
          v-model="row.securityPriceMaxUpdate"
          @on-change="changInput(row, index)"
          placeholder="请输入..."
        />
      </template>
      <template slot-scope="{ row, index }" slot="securityPriceMin">
        <span>{{ row.old.securityPriceMin }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="securityPriceMinUpdate">
        <Input
          v-model="row.securityPriceMinUpdate"
          @on-change="changInput(row, index)"
          placeholder="请输入..."
        />
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <div v-if="row.actions.length > 2">
          <a @click="handleClickMore(row.actions[0].name, row)">{{
            row.actions ? row.actions[0].label : ""
          }}</a>
          <Divider type="vertical" />
          <Dropdown @on-click="(name) => handleClickMore(name, row)" transfer>
            <a
              >更多
              <Icon type="ios-arrow-down" />
            </a>
            <DropdownMenu slot="list">
              <DropdownItem
                v-for="(item, i) in row.actions.slice(1)"
                :key="i"
                :name="item.name"
              >
                {{ item.label }}
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
        <div v-else>
          <a
            v-if="row.actions"
            @click="handleClickMore(row.actions[0].name, row)"
            >{{ row.actions[0].label }}</a
          >
          <Divider
            v-if="row.actions && row.actions.length > 1"
            type="vertical"
          />
          <a
            v-if="row.actions && row.actions.length > 1"
            @click="handleClickMore(row.actions[1].name, row)"
            >{{ row.actions[1].label }}</a
          >
        </div>
      </template>
    </Table>
    <Modal v-model="compareModal" title="选择比价对象" width="800">
      <Row type="flex" align="middle">
        <span>供应商：</span>
        <Input
          v-model="supplyName"
          placeholder="请输入供应商名称或供应商代码"
          style="width: 300px"
        />
        <Button type="primary" style="margin: 0 10px" @click="search"
          >查询</Button
        >
        <Button @click="search('reset')">清空</Button>
      </Row>
      <div style="margin-top: 15px">
        <Table :columns="compareCol" :data="compareData">
          <template slot-scope="{ row }" slot="action">
            <Button
              type="success"
              size="small"
              style="margin: 3px 0"
              @click="compareOk(row)"
              >选择</Button
            >
          </template>
        </Table>
        <div class="ivu-mt ivu-text-center">
          <Page
            :total="totalNum"
            show-total
            show-sizer
            transfer
            :current.sync="nowPage"
            @on-change="linkAttributeChang()"
            @on-page-size-change="handleChangePage"
          />
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import util from '@/libs/util';
import { ApiRequest } from '@api/basePage';
import tables from '@/mixins/dynamictable'; // 混入通用代码

import qwInput from '@/components/common/formItem/qwInput'; // 表单input组件
import qwSelect from '@/components/common/formItem/qwSelect'; // 表单select组件
import qwDatePicker from '@/components/common/formItem/qwDatePicker'; // 表单日期组件
import qwSelectTree from '@/components/common/formItem/qwSelectTree'; // 表单下拉树组件

// import tableActions from './tableActions'; // 表格操作项
import tableBtns from './tableBtns'; // 表格内部操作按钮
import { SALE_PRICE_TYPE } from '../../constans';

export default {
  mixins: [tables],
  props: {
    dynamicData: {
      type: Object
    },
    pagePath: {
      type: String
    },
    orderState: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState('admin/baseList', [
      'listData',
      'searchFormData',
      'searchFormDataQ'
    ])
  },
  watch: {
    orderState (n, o) {
      this.getData();
    }
  },
  components: {
    qwInput,
    qwSelect,
    qwDatePicker,
    qwSelectTree,
    // tableActions,
    tableBtns
  },
  data () {
    return {
      supplyName: '',
      salePriceTypes: SALE_PRICE_TYPE,
      actions: [],
      specTableData: [],
      util: util,
      totalNum: 0,
      pageShow: 10, // 每页展示条数
      nowPage: 1, // 当前页码
      totalPage: 0, // 数据总条数
      markupTypeUpdateList: [
        {
          optionValue: '1',
          optionHtml: '金额'
        },
        {
          optionValue: '2',
          optionHtml: '比例'
        }
      ],
      comparePirceTypeUpdateList: [
        {
          optionValue: '1',
          optionHtml: '售价'
        },
        {
          optionValue: '2',
          optionHtml: '现金价'
        },
        {
          optionValue: '3',
          optionHtml: '分销价'
        }
      ],
      compareTypeUpdateList: [
        {
          optionValue: '1',
          optionHtml: '一品多供'
        },
        {
          optionValue: '2',
          optionHtml: '竞争对手'
        },
        {
          optionValue: '3',
          optionHtml: '同品类供应商'
        },
        {
          optionValue: '4',
          optionHtml: '同品牌供应商'
        }
      ],
      basePath: this.dynamicData.basePath, // 拼接基础路径
      tableDataList: [],
      select: [
        {
          label: '一品多供',
          value: '0'
        },
        {
          label: '同品牌供应商',
          value: '1'
        },
        {
          label: '同类供应商',
          value: '2'
        },
        {
          label: '竞争对手',
          value: '3'
        }
      ],
      compareModal: false,
      selectIndex: 0,
      compareData: [],
      compareCol: [
        {
          title: '比价对象',
          key: 'compareTargetUpdate',
          align: 'center'
        },
        {
          title: '比价对象名字',
          key: 'compareTargetNameUpdate',
          align: 'center'
        },
        {
          title: '联系方式',
          key: 'compareTelUpdate',
          align: 'center'
        },
        {
          title: '地址',
          key: 'compareAddressUpdate',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
          fixed: 'right',
        }
      ]
    };
  },
  created () {
    this.querySupplierInfoList();
  },
  methods: {
    ...mapMutations('admin/baseList', ['setTableRowData']),
    search (type) {
      if (type === 'reset') {
        this.supplyName = '';
      } else {
        this.querySupplierInfoList();
      }
    },
    linkAttributeChang (e) {
      this.nowShow = e;
      this.querySupplierInfoList();
    },
    handleChangePag (e) {
      this.pageShow = e;
      this.querySupplierInfoList();
    },
    querySupplierInfoList () {
      let data = {
        supplyName: this.supplyName,
        nowPage: this.nowPage,
        pageShow: this.pageShow
      };
      ApiRequest(
        '/sysback/purchasepriceruleupdate/getSupplierInfo',
        'post',
        data
      ).then((res) => {
        if (res.retStatus === '1') {
          this.compareData = res.retData;
          res.totalNum = 100;
          this.totalNum = res.totalNum;
        }
      });
    },
    compareFun (row, index) {
      this.compareModal = true;
      this.selectIndex = index;
    },
    // 比价对象类型切换
    compareTypeSelect (type, row, index) {
      if (type) {
        row.compareTargetUpdate = '';
        row.compareTargetNameUpdate = '';
        row.compareManUpdate = '';
        row.compareTelUpdate = '';
        row.compareAddressUpdate = '';
        this.tableDataList[index] = row;
      }
    },
    // 选中后处理
    compareOk (row) {
      this.tableDataList[this.selectIndex].compareTargetUpdate =
        row.compareTargetNameUpdate;
      this.tableDataList[this.selectIndex].compareTelUpdate =
        row.compareTelUpdate;
      this.tableDataList[this.selectIndex].compareAddressUpdate =
        row.compareAddressUpdate;
      this.tableDataList[this.selectIndex].compareTargetNameUpdate =
        row.compareTargetNameUpdate;
      this.tableDataList[this.selectIndex].compareManUpdate =
        row.compareManUpdate;
      this.compareModal = false;
    },

    // 获取表格的数据
    getData () {
      let searchParam = [];
      Object.keys(this.searchFormData).forEach(key => {
        searchParam.push({
          name: key,
          value: this.searchFormData[key]
        });
      });
      Object.keys(this.searchFormDataQ).forEach(key => {
        searchParam.push({
          name: key,
          value: this.searchFormDataQ[key]
        });
      });
      let data = {
        nowPage: this.nowPage,
        pageShow: this.pageShow,
        searchParam: JSON.stringify(searchParam),
        sortName: '',
        sortType: ''
      };
      // 开始请求列表
      let listArr = [];
      listArr[0] = this.$route.query.list;
      let tableDataList = listArr;
      tableDataList.forEach(item => {
        let actions = [];
        actions.push({
          name: 'Sub',
          label: '提交',
          handleType: 'prop'
        });
        item.actions = actions;
      });
      // 增加表格操作项
      this.tableDataList = listArr;
    },
    changInput (row, index) {
      this.tableDataList[index] = row;
    },
    // 批量提交按钮
    pSub () {
      if (this.tableDataList.length > 0) {
        ApiRequest(
          '/sysback/salepriceruleupdate/batchUpdateRule',
          'post',
          this.tableDataList
        ).then(res => {
          if (res.retStatus == '1') {
            this.$Message.success('提交成功');
            this.getData();
          }
        });
      }
    },
    // 切换分页
    handleChangePage (val) {
      this.pageShow = val;
      this.$nextTick(() => {
        this.getData();
      });
    },
    handleClickMore (name, row) {
      if (name === 'Delete') {
        this.$Modal.confirm({
          title: '删除操作',
          content: '确定删除此数据吗？',
          onOk: () => {
            let data = {
              uuid: row.uuid
            };
            // 开始请求商品列表
            ApiRequest(
              this.requestApi.delTableList.url,
              this.requestApi.delTableList.type,
              data
            ).then(res => {
              this.$Message.success('删除成功');
              this.actionsChange();
            });
          }
        });
      } else {
        let obj = {}; // 动作的对象信息
        row.actions.forEach(item => {
          if (name === item.name) {
            obj = item;
            return false;
          }
        });
        this.setTableRowData(row);
        if (obj.handleType === 'link') {
          // 操作类型为链接时，拼接参数跳转
          let jumpPath = this.basePath + obj.name;
          this.$router.push({
            path: jumpPath,
            query: {
              uuid: row.uuid,
              orderType: row.orderType
            }
          });
        } else if (obj.handleType === 'prop') {
          // 操作类型为弹窗时 打开弹窗
          if (obj.name === 'viewing') {
            this.showPropviewing = true;
          } else if (obj.name === 'view') {
            this.showPropviewing = true;
          } else if (obj.name === 'Sub') {
            let datas = {
              recordNo: row.recordNo,
              // categoryUuid: row.categoryUuid,
              oldUuid: row.oldUuid,
              skuNo: row.skuNo,
              spuNo: row.spuNo,
              productName: row.old.productName,
              productManagerArea: row.old.productManagerArea,
              unit: row.old.unit,
              spec: row.old.spec,
              productUuid: row.old.productUuid,
              categoryUuid: row.old.categoryUuid,
              storeUuidUpdate: row.storeUuidUpdate,
              storeNoUpdate: row.storeNoUpdate,
              storeNameUpdate: row.storeNameUpdate,
              compareAreaUpdate: row.compareAreaUpdate,
              compareTypeUpdate: row.compareTypeUpdate,
              compareTargetNameUpdate: row.compareTargetNameUpdate,
              compareTargetUpdate: row.compareTargetUpdate,
              markupTypeUpdate: row.markupTypeUpdate,
              markupValueUpdate: row.markupValueUpdate,
              comparePirceTypeUpdate: row.comparePirceTypeUpdate,
              weighMarkupValueUpdate: row.weighMarkupValueUpdate,
              salePriceTypeUpdate: row.old.salePriceType,
              compareTelUpdate: row.compareTelUpdate,
              compareManUpdate: row.compareManUpdate,
              compareAddressUpdate: row.compareAddressUpdate,
              brandDiffUpdate: row.brandDiffUpdate,
              lastSaleCountUpdate: row.lastSaleCountUpdate,
              nowSaleCountUpdate: row.nowSaleCountUpdate,
              saleRateUpdate: row.saleRateUpdate,
              compareRuleUpdate: row.compareRuleUpdate,
              securityRateMaxUpdate: row.securityRateMaxUpdate,
              securityRateMinUpdate: row.securityRateMinUpdate,
              securityPriceMinUpdate: row.securityPriceMinUpdate,
              securityPriceMaxUpdate: row.securityPriceMaxUpdate
            };
            ApiRequest(
              this.listData.requestApi.subTableList.url,
              this.listData.requestApi.subTableList.type,
              datas
            ).then(res => {
              if (res.retStatus == '1') {
                this.$Message.success('操作成功！');
                // let jumpPath = this.basePath + 'List';
                this.$router.push({
                  name: 'sellingPriceList'
                });
              }
            });
          } else {
          }
        } else {
          // 操作类型为弹窗时 打开弹窗
        }
      }
    },
    formatSalePriceType (typeVal) {
      const typeArr = SALE_PRICE_TYPE.filter(item => item.value == typeVal);
      if (typeArr.length !== 0) {
        return typeArr[0].name;
      }
      return typeVal;
    }
  }
};
</script>
<style lang="less" scoped>
.i-table-no-border .ivu-table-header th {
  background: #f8f8f8;
}
</style>
